import React, { useEffect, useState } from 'react';
import { Layout, Menu, Button, Space, Avatar, Dropdown } from 'antd';
import {
  HomeOutlined,
  FileTextOutlined,
  SearchOutlined,
  RobotOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import type { UserInfo, UserType } from '../services/userService';

const { Header: AntHeader } = Layout;

const Header: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
  const [loginMode, setLoginMode] = useState<UserType | null>(null);

  // 检查用户登录状态和登录模式
  useEffect(() => {
    const token = localStorage.getItem('token');
    const userInfoStr = localStorage.getItem('userInfo');
    const mode = localStorage.getItem('loginMode') as UserType | null;
    
    if (token && userInfoStr) {
      setIsLoggedIn(true);
      setLoginMode(mode);
      try {
        setUserInfo(JSON.parse(userInfoStr));
      } catch (e) {
        console.error('Failed to parse user info', e);
      }
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    localStorage.removeItem('loginMode');
    setIsLoggedIn(false);
    setUserInfo(null);
    setLoginMode(null);
    navigate('/');
  };

  // 根据登录模式显示不同的菜单项
  const getMenuItems = () => {
    // 基础菜单项 - 所有用户可见
    const baseItems = [
      { key: '/', icon: <HomeOutlined />, label: '首页' },
    ];
    
    // 根据登录模式添加特定菜单项
    switch (loginMode) {
      case 'jobseeker':
        return [
          ...baseItems,
          { key: '/resumes', icon: <FileTextOutlined />, label: '简历管理' },
          { key: '/jobs', icon: <SearchOutlined />, label: '职位搜索' },
          { key: '/assistant', icon: <RobotOutlined />, label: 'AI助手' },
        ];
      case 'employer':
        return [
          ...baseItems,
          { key: '/jobs', icon: <SearchOutlined />, label: '职位管理' },
          { key: '/candidates', icon: <UserOutlined />, label: '候选人管理' },
        ];
      case 'admin':
        // 管理员菜单项 - 实际项目中应跳转到管理员仪表盘
        return [
          { key: '/', icon: <HomeOutlined />, label: '管理员首页' },
        ];
      default:
        // 未登录或未知模式显示基础菜单
        return baseItems;
    }
  };

  const userMenuItems = [
    { key: '1', icon: <UserOutlined />, label: '个人中心', onClick: () => navigate('/profile') },
    { key: '2', icon: <SettingOutlined />, label: '账号设置' },
    { key: '3', icon: <LogoutOutlined />, label: '退出登录', onClick: handleLogout },
  ];

  return (
    <AntHeader style={{ position: 'fixed', zIndex: 1, width: '100%', display: 'flex', alignItems: 'center' }}>
      <div className="logo">求职管理系统</div>
      <Menu
        theme="dark"
        mode="horizontal"
        selectedKeys={[location.pathname]}
        items={getMenuItems()}
        onClick={({ key }) => navigate(key)}
        style={{ flex: 1, minWidth: 0, borderBottom: 0, height: '64px', lineHeight: '64px' }}
      />
      {isLoggedIn ? (
        <Dropdown menu={{ items: userMenuItems }}>
          <Space style={{ marginRight: 24, cursor: 'pointer', color: 'white' }}>
            <Avatar icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
            <span>{userInfo?.fullName || '用户'}</span>
          </Space>
        </Dropdown>
      ) : (
        <Space style={{ marginRight: 24 }}>
        <Button type="primary" onClick={() => navigate('/login')}>
          登录
        </Button>
        <Button onClick={() => navigate('/register')}>
          注册
        </Button>
        <Button onClick={() => navigate('/admin/login')}>
          管理员入口
        </Button>
      </Space>
      )}
    </AntHeader>
  );
};

export default Header;